<template>
  <view>
    <uv-tabs :list="list" :is-scroll="false" lineColor="#B10D0C" :current="status" activeStyle="orange" lineWidth="45"
      lineHeight="5" :itemStyle="{ width: '187.5rpx', height: '100rpx', padding: '0rpx' }" @change="changeTab">
    </uv-tabs>
    <order-card :orderData="orderList" :status="status" :hasMore="true" @on-success="fetchData"></order-card>
  </view>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app"
import { ref } from "vue";
import { getList } from '@/api/order.js'
import OrderCard from '@/components/order-card/order-card.vue'
const status = ref(0)
const orderList = ref([])
const list = [
  {
    name: "待接单",
    value: 0
  },
  {
    name: "已接单",
    value: 1
  },
  {
    name: "已完成",
    value: 2
  },
  {
    name: "已移交",
    value: 3
  },
]
const fetchData = async () => {
  const { data } = await getList({ status: status.value })
  orderList.value = data
}
// 切换tab
const changeTab = (e) => {
  status.value = e.value;
  uni.setNavigationBarTitle({
    title: e.name
  });
  fetchData()
}
onLoad((options) => {
  status.value = Number(options.status)
  uni.setNavigationBarTitle({
    title: options.name
  });
  fetchData()
})

</script>

<style lang="scss" scoped>
::v-deep .uni-card {
  border-radius: 20rpx !important;
}
</style>